<template>
    <div class="history">
        <h1 class="title">协商历史:</h1>
        <p class="note" v-if="historyList.length===0">暂无历史记录</p>
        <ul v-else>
            <li v-for="(info, index) in historyList" :key="index">
                <div class="row-container">
                    <div class="row">
                        <h1>{{info.launch_type | nameFil}}：</h1>
                        <p>{{info.created}}</p>
                    </div>
                    <p class="content">{{info.content}}</p>
                </div>
                <ul class="pic">
                    <li v-for="(item, index1) in info.img" :key="index1">
                        <img :src=item @click="previewImage(info.img, index1)">
                    </li>
                </ul>
                <div class="line"></div>
            </li>
        </ul>
    </div>
</template>

<script type="text/ecmascript-6">
    import {ImagePreview} from 'vant';
    import API from '../../../request/api';
    export default {
        name: 'refund-history',
        data() {
            return {
                historyList: [] // 协商历史
            };
        },
        mounted(){
            let data={
                after_id:this.$route.query.refundId
            };
            this.request.get(API.afterconsult, data).then(res => {
                // 获取协商历史列表
                this.historyList = res;
            }, () => {
            });
        },
        methods: {
            previewImage(list, index) {
                ImagePreview({
                    images: list,
                    startPosition: index,
                    onClose() {}
                });
            }
        },
        filters:{
            nameFil(type){
                if(type === 'platform'){
                    return '商家'
                } else {
                    return this.$store.state.login.userInfo.nickname
                }
            }
        },
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import '~assets/main.styl';
    .history {
        width: 100vw
        background grayF
        padding 0 cellPadding
        box-sizing border-box
        .note{
            font-size vw(12)
            color: gray9
            padding 2vw cellPadding 6vw
            text-align center
        }
        .title {
            padding 4vw 0 2vw
        }
        ul {
            .row-container{
                height vw(80)
            }
            .row {
                flex-x()
                padding-top vw(10)
                p {
                    font-size vw(12)
                    color: gray9
                }
            }
            .content {
                color: gray9
                font-size vw(12)
                line-height vw(16)
                padding-top vw(11)
            }
            .pic {
                flex-x(flex-start)
                li {
                    width: vw(60)
                    height: vw(60)
                    img {
                        width: 100%
                    }
                }
            }
        }
    }
</style>